<template>
  <!--  基础的关联逻辑组件  -->
  <div class="hor-layout-center">
    <!-- 1.比较逻辑-这个只是针对页面初始化的时候只有一个基础的比较逻辑组件。其他情况都在下面   -->
    <base-relation v-if="levelItem.model=='valueCon'" v-model="levelItem" @newRelationBack="levelBack"
                   @relationUpdate="levelBack" @removeRelation="initData"></base-relation>
    <!--  2.关联逻辑  -->
    <div v-if="levelItem.model=='relationCon'" class="hor-layout-center relation-card" :style="relationCardStyle()">
      <div v-for="(rlItem,rlIndex) in levelItem.children" :key="rlIndex" class="hor-layout-center">
        <base-relation v-if="rlItem.model=='valueCon'" :value="rlItem" @newRelationBack="levelBack"
                       @relationUpdate="levelBack" @removeRelation="removeLevelBack"></base-relation>
        <base-level v-if="rlItem.model=='relationCon'" :value="rlItem" @levelBack="levelBack"></base-level>
        <div v-if="rlItem.model=='connectPara'" class="relation-line" :class="'relation-'+rlItem.command"></div>
        <el-dropdown v-if="rlIndex==levelItem.children.length-1" class="dropdown-view" trigger="click"
                     @command="handleCommand">
          <i class="el-icon-circle-plus"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="and"> 并且</el-dropdown-item>
            <el-dropdown-item command="or">或者</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import BaseRelation from "@/views/relation/base-relation";

export default {
  name: "base-level",
  components: {BaseRelation},
  props: {
    value: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    value: {
      handler(newValue) {
        this.levelItem = newValue
      },
      immediate: true
    }
  },
  data() {
    return {
      levelItem: {}
    }
  },
  methods: {
    initData() {
      this.levelItem = {id: this.generateId(), model: "valueCon", value: {}, valueStr: "null"}
    },
    generateId() {
      let color = "", letters = "0123456789ABCDEF"
      for (let i = 0; i < 5; i++) {
        color += letters[Math.floor(Math.random() * 16)]
      }
      return new Date().getTime() + color
    },
    handleCommand(command) {
      let connectItem = {model: "connectPara", command}
      let newRelationItem = {id: this.generateId(), model: "valueCon", value: {}, valueStr: "null"}
      this.levelItem.children = [...this.levelItem.children, connectItem, newRelationItem]
      this.levelBack(this.levelItem)
    },
    removeLevelBack(val) {
      let index = this.levelItem.children.indexOf(item => item.id == val.id)
      if (index == 0) this.levelItem.children.splice(index, 2)
      else this.levelItem.children.splice(index - 1, 2)
      if (this.levelItem.children.length == 1) {
        this.levelItem = {...this.levelItem.children[0], id: this.levelItem.id}
        delete this.levelItem.children
      }
      this.$emit("levelBack", this.levelItem)
    },
    levelBack(val) {
      if (this.levelItem.children) {
        this.levelItem.children = this.levelItem.children.map(item => {
          if (item.id == val.id) item = val
          return item
        })
      } else {
        this.levelItem = val
      }
      console.log("levelBack", JSON.stringify(this.levelItem))
      this.$emit("levelBack", this.levelItem)
    },
    relationCardStyle() {
      let color = "#", letters = "0123456789ABCDEF"
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)]
      }
      return {backgroundColor: color}
    }
  }
}
</script>

<style scoped>
.relation-card {
  width: fit-content;
  padding: 10px;
  background: #c4dff5;
  border-radius: 10px;
}

.relation-line {
  width: 30px;
  height: 1px;
}

.relation-or {
  border-top: dotted 5px white;
}

.relation-and {
  border-top: solid 5px white;
}

.dropdown-view {
  font-size: 20px;
  margin-left: 8px;
  max-resolution: 5px;
  line-height: 0;
}

/deep/ .el-input__inner {
  color: cornflowerblue;
  font-weight: bold;
  border-color: cornflowerblue;
}
</style>
